<template>
  <div id="root" class="ui-list">
    <Topbar />
    <slot name="nav" />
    <slot name="banner" />
    <div class="app-body">
      <div class="app-body-container container flex justify-between">
        <div class="sidebar"><slot name="sidebar" /></div>
        <div class="app-list-main"><slot /></div>
      </div>
    </div>
    <slot name="footer" />
    <Footer />
  </div>
</template>
<script setup lang="ts">
import Topbar from './Default/Topbar.vue'
import Footer from './Default/Footer.vue'
import { ProjectName } from '~~/config'

useHead({
  titleTemplate: `%s - ${ProjectName}`,
  bodyAttrs: {
    class: 'light',
  },
})
</script>
